<template>
  <div>
    <a-drawer
      :visible="visible"
      class="custom-class"
      placement="right"
      :width="1400"
      @close="onClose"
      :closable="false"
    >
      <!-- <template #title>
      <div class="custom-title">

      </div>
    </template> -->

      <div class="content_box">
        <div style="display: flex; justify-content: space-between">
          <div
            style="
              font-size: 20px;
              font-weight: 700;
              margin: 0px 0px 15px 10px;
              width: 90%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
          >
            {{ activity_name }}
          </div>
          <div>
            <close-outlined style="font-size: 20px" @click="onClose" />
          </div>
        </div>

        <div class="content_top">
          <div class="top_box">
            <div
              class="top_box_item"
              v-for="(item, index) in toplist"
              :key="index"
            >
              <div class="item-left">
                <img class="left_img" :src="item.img" alt="" />
              </div>
              <div class="item-right">
                <div class="bottom">{{ item.title }}</div>
                <div class="top">{{ item.num }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="export_btn">
          <!-- <a-button type="primary" class="btn" @click="expurtFn">导出</a-button> -->
        </div>

        <div class="content_table">
          <a-table
            :columns="columns"
            :data-source="dataSource"
            :pagination="pagination"
            :loading="loading"
            @change="handleTableChange"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key == 'name'">
                <div class="name_content">
                  <div class="left">
                    <img
                      class="ava_img"
                      :src="record?.user?.data?.avatar"
                      alt=""
                    />
                  </div>
                  <div class="right">
                    <div class="right_one">
                      {{ record?.user?.data?.nickname }}
                    </div>
                    <a-tooltip placement="top">
                      <template #title>
                        <span>{{ record?.user?.data?.open_id }}</span>
                      </template>
                      <div class="right_two">
                        {{ record?.user?.data?.open_id }}
                      </div>
                    </a-tooltip>
                  </div>
                </div>
              </template>

              <template v-if="column.key == 'video'">
                <div class="img_bg" @click="previewFn(record)">
                  <img
                    v-if="record?.material_info?.cover_url"
                    class="corver_url"
                    :src="record?.material_info?.cover_url"
                    alt=""
                  />

                  <div class="mask">
                    <EyeOutlined class="to_view"> </EyeOutlined>
                  </div>
                </div>
              </template>

              <template v-if="column.key == 'one'">
                <div>{{ record?.user?.data?.phone ?? "-" }}</div>
              </template>

              <template v-if="column.key == 'two'">
                <div>{{ record?.stats?.play_count ?? 0 }}</div>
              </template>

              <template v-if="column.key == 'three'">
                <div>{{ record?.stats?.comment_count ?? 0 }}</div>
              </template>

              <template v-if="column.key == 'four'">
                <div>{{ record?.stats?.digg_count ?? 0 }}</div>
              </template>

              <template v-if="column.key == 'five'">
                <div>{{ record?.stats?.share_count ?? 0 }}</div>
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </a-drawer>

    <viewVideo ref="viewVideoRef"></viewVideo>
  </div>
</template>

<script setup>
import { computed, defineComponent, ref, watch } from "vue";
import {
  PlusOutlined,
  EyeOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";
import { useRouter, useRoute } from "vue-router";
import utils from "@/common/utils/utils.js";
import request from "../../../common/utils/request";
// 视频预览组件
import viewVideo from "@/views/shotstack/components/dialogComponent/viewVideo.vue";
const router = useRouter();
const route = useRoute();
const emit = defineEmits(["closeFn"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  detailid: {
    type: String,
    default: "",
  },
});

const ava_img = ref(
  "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/system_config_img/20230608/6481c9b19470895793.png"
);

const toplist = ref([
  {
    title: "视频发布数",
    img: utils.staticPath + "images/workAi/shotstack/baodian1.png",
    num: "0",
  },
  {
    title: "视频播放量",
    img: utils.staticPath + "images/workAi/shotstack/baodian2.png",
    num: "0",
  },
  {
    title: "视频评论数",
    img: utils.staticPath + "images/workAi/shotstack/baodian3.png",
    num: "0",
  },
  {
    title: "视频点赞数",
    img: utils.staticPath + "images/workAi/shotstack/baodian4.png",
    num: "0",
  },
  {
    title: "视频分享数",
    img: utils.staticPath + "images/workAi/shotstack/baodian5.png",
    num: "0",
  },
]);

const expurtFn = () => {
  console.log("导出相关逻辑");
};

const columns = ref([
  {
    title: "抖音用户",
    dataIndex: "name",
    key: "name",
    align: "center",
    width: 120,
  },
  {
    title: "视频",
    dataIndex: "video",
    key: "video",
    align: "center",
  },
  {
    title: "手机号",
    dataIndex: "one",
    key: "one",
    align: "center",
  },
  {
    title: "播放量",
    dataIndex: "two",
    key: "two",
    align: "center",
  },
  {
    title: "评论数",
    dataIndex: "three",
    key: "three",
    align: "center",
  },
  {
    title: "点赞数",
    dataIndex: "four",
    key: "four",
    align: "center",
  },
  {
    title: "转发数",
    dataIndex: "five",
    key: "five",
    align: "center",
  },
]);

const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const dataSource = ref([]);
const loading = ref(false);

const pagination = computed(() => ({
  total: total.value,
  page: page.value,
  pageSize: pageSize.value,
}));

const handleTableChange = (pager, filters, sorter) => {
  page.value = pager.current;
  pageSize.value = pager.pageSize;
  initData();
};

const release_times_count = ref(0);
const play_count = ref(0);
const digg_count = ref(0);
const comment_count = ref(0);
const share_count = ref(0);
const activity_name = ref("");
const initData = () => {
  let params = {
    page: page.value,
    pageSize: pageSize.value,
    id: props.detailid,
  };
  request
    .get("/work_ai", "/hotStore/activity/details", params)
    .then((res) => {
      if (res.activity.stats && res.activity.stats !== null) {
        release_times_count.value =
          res.activity?.stats?.release_times_count ?? 0;
        play_count.value = res.activity?.stats?.play_count ?? 0;
        digg_count.value = res.activity?.stats?.digg_count ?? 0;
        comment_count.value = res.activity?.stats?.comment_count ?? 0;
        share_count.value = res.activity?.stats?.share_count ?? 0;
        toplist.value = [
          {
            title: "视频发布数",
            img: utils.staticPath + "images/workAi/shotstack/baodian1.png",
            num: release_times_count.value,
          },
          {
            title: "视频播放量",
            img: utils.staticPath + "images/workAi/shotstack/baodian2.png",
            num: play_count.value,
          },
          {
            title: "视频评论数",
            img: utils.staticPath + "images/workAi/shotstack/baodian4.png",
            num: comment_count.value,
          },
          {
            title: "视频点赞数",
            img: utils.staticPath + "images/workAi/shotstack/baodian3.png",
            num: digg_count.value,
          },
          {
            title: "视频分享数",
            img: utils.staticPath + "images/workAi/shotstack/baodian5.png",
            num: share_count.value,
          },
        ];
      }
      total.value = res.result.total;
      dataSource.value = res.result.data;

      console.log(res.activity.name, "表格渲染的数据1111111");
      activity_name.value = res.activity.name;
      // dataSource.value = [
      //   {
      //     id: 66,
      //     org_id: 2,
      //     activity_id: 16,
      //     material_url:
      //       "https://shotstack.oss-cn-hangzhou.aliyuncs.com/upload/shotstack/20241211/4v6o31ItJJe9Tn5LCBABJ.mp4",
      //     material_info: {
      //       id: 2370,
      //       width: 576,
      //       height: 1024,
      //       cover_url:
      //         "https://shotstack.oss-cn-hangzhou.aliyuncs.com/upload/shotstack/20241211/ice-generated/6a9d47c0b76f71ef8afbf6e7c45a6302/snapshots/normal/2bdd7080562a4568a6e5e381f950a057-00001.jpg",
      //       material_url:
      //         "https://shotstack.oss-cn-hangzhou.aliyuncs.com/upload/shotstack/20241211/4v6o31ItJJe9Tn5LCBABJ.mp4",
      //       oss_media_id: "6a9d47c0b76f71ef8afbf6e7c45a6302",
      //       material_size: 7670874,
      //       material_type: "video",
      //       material_duration: 38242,
      //     },
      //     open_id: "_000Eq0mySjTIlumvteZEtfFsABTjS7iyi82",
      //     status: 2,
      //     created_at: null,
      //     updated_at: null,
      //     stats: {
      //       id: 1,
      //       org_id: 2,
      //       activity_id: 16,
      //       activity_video_id: 66,
      //       digg_count: 1,
      //       comment_count: 2,
      //       play_count: 4,
      //       share_count: 0,
      //     },
      //     user: {
      //       id: 1,
      //       org_id: 2213,
      //       nickname: "幻梦",
      //       status: 1,
      //       data: {
      //         city: "",
      //         phone: "18356093564",
      //         avatar:
      //           "https://p3.douyinpic.com/aweme/100x100/aweme-avatar/mosaic-legacy_5090004648b571a87dc4.jpeg?from=4010531038",
      //         gender: 0,
      //         log_id: "20241212100752D419EAAC0AB3AB51AFD6",
      //         captcha: "",
      //         country: "",
      //         open_id: "_000Eq0mySjTIlumvteZEtfFsABTjS7iyi82",
      //         desc_url: "",
      //         district: "",
      //         nickname: "幻梦",
      //         province: "",
      //         union_id: "0582b18f-3e8e-5e4a-a631-593374e18ac9",
      //         client_key: "aw9cg0234wcmkcx8",
      //         error_code: 0,
      //         description: "",
      //         avatar_larger:
      //           "https://p3.douyinpic.com/aweme/1080x1080/aweme-avatar/mosaic-legacy_5090004648b571a87dc4.jpeg?from=4010531038",
      //         e_account_role: "",
      //         encrypt_mobile: "eQqrmjE7xDfHQYOUo9lu+g==",
      //         grant_permissions: "user_info,data.external.item,mobile",
      //       },
      //       open_id: "_000Eq0mySjTIlumvteZEtfFsABTjS7iyi82",
      //     },
      //   },
      // ];
    })
    .catch((err) => {});
};

const viewVideoRef = ref(null);
const previewFn = (item) => {
  viewVideoRef.value.open(item.material_url);
};

watch(
  () => props.detailid,
  (val) => {
    if (val !== "") {
      initData();
    }
  },
  {
    immediate: true,
  }
);

const onClose = () => {
  toplist.value.forEach((item) => {
    item.num = "0";
  });
  dataSource.value = [];
  emit("closeFn");
};
</script>

<style lang="less" scoped>
.content_box {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  padding: 20px;
  .content_top {
    width: 100%;

    .top_box {
      width: 100%;

      display: flex;
      .top_box_item {
        margin-left: 10px;
        border-radius: 10px;
        background-color: #fafbfc;
        width: 20%;
        height: 130px;
        padding: 30px 0 20px 0;
        display: flex;
        justify-content: center;
        .item-left {
          width: 36px;
          height: 36px;
          border-radius: 40px;
          .left_img {
            width: 100%;
            height: 100%;
          }
        }
        .item-right {
          margin-left: 20px;
          .top {
            font-size: 40px;
            font-weight: 700;
            color: #202020;
          }
        }
      }
    }
  }

  .export_btn {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
    .btn {
      border-radius: 5px;
    }
  }
}

.bd-r {
  border-radius: 5px;
  margin-bottom: 20px;
}

.name_content {
  display: flex;
  align-items: center;

  .left {
    width: 50px;
    height: 50px;
    border-radius: 40px;
    .ava_img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .right {
    margin-left: 10px;
    text-align: left;

    .right_two {
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }
  }
}

.img_bg {
  width: 80px;
  height: 100px;
  // background-color: #000;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  .corver_url {
    width: 100%;
    max-height: 100%;
  }

  .to_view {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
}

.img_bg:hover .to_view {
  opacity: 1;
}
</style>
